<template>
    <kdx-content-bar>
        <div class="container">
            <div class="content">
                <Row>
                    <i-col span="10">
                        <kdx-form-title>{{ configure.wx.name }}免押额度设置</kdx-form-title>
                        <table class="ivu-table" cellspacing="0" style="width: 100%;">
                            <tr>
                                <th class="text-center">信用等级</th>
                                <th class="text-center">分值区间</th>
                                <th class="text-center">免押额度</th>
                            </tr>
                            <tr v-for="(item, index) in configure.wx.items" :key="index">
                                <td class="text-center">{{ item.name }}</td>
                                <td class="text-center">{{ item.min }} ~ {{ item.max }}</td>
                                <td style="width: 80px;">
                                    <kdx-rr-input 
                                        v-model="item.quota" 
                                        placeholder="请输入额度" 
                                        number :min-value="0" :max-value="99999" class="width-172">
                                        <span slot="append">元</span>
                                    </kdx-rr-input>
                                </td>
                            </tr>
                        </table>
                    </i-col>
                </Row>
            </div>
        </div>
        
        <template #btn>
            <Button class="primary-long" :disabled='noManagePerm' @click="handleSave">保存</Button>
        </template>
    </kdx-content-bar>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            configure: {
                wx: {
                    name:'微信支付分',
                    items:[]
                }
            }
        }
    },
    computed: {
        noManagePerm() { //管理权限
            return !this.$getPermMap('sale.basic.free.manage')
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleSave() {
            console.log(this.configure)
            this.$api.marketApi.updateDepositInterval(this.configure).then(res => {
                if (res.error === 0) {
                    this.getData()
                    this.$Message.success('保存成功')
                }
            })
        },
        //获取数据
        getData() {
            this.$api.marketApi.getDepositInterval().then(res => {
                console.log(res)
                this.configure.wx = res.wx
            })
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    min-height: 100%;
    padding-top: 20px;
    border-radius: 2px;
}

.content {
    padding: 40px;
    overflow: auto;
    background: #fff;

    /deep/ .show-img + .ivu-form-item-error-tip {
        top: 84%;
    }

    .content-box {
        padding-bottom: 30px;
    }

    .agree-input {
        margin-right: 10px;
        width: 340px;
    }

    .example {
        color: #939799;

        &:hover {
            color: #2b85e4;
        }
    }

    .danger {
        background: var(--danger-color);
        border: 1px solid var(--danger-color);
    }

    .text-center {
        text-align: center;
    }


}

</style>
